<template>
  <div class="home">
    <div id="classHeader">
      <a-row
        class="grid-demo"
        style="marginbottom: 16px; backgroundcolor: var(--color-fill-2)"
      >
        <a-col :span="8">
          <a-button type="primary" style="margin-left: 60px">
            添加课程
          </a-button>
        </a-col>
        <a-col :span="8" :offset="8">
          <a-input-search
            :style="{ width: '320px' }"
            placeholder="请输入你要搜索课程......"
            search-button
          />
        </a-col>
      </a-row>
    </div>
    <div class="content">
      <a-card :bordered="false" :style="{ width: '100%' }">
        <a-card-grid
          v-for="(_, index) in new Array(8)"
          :key="index"
          :hoverable="index % 2 === 0"
          :style="{ width: '23%', margin: '15px' }"
        >
          <a-card class="card-demo" :bordered="false">
            <template #cover>
              <div
                :style="{
                  height: '204px',
                  overflow: 'hidden',
                }"
              >
                <img
                  :style="{ width: '100%', transform: 'translateY(-20px)' }"
                  alt="dessert"
                  src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
                />
              </div>
            </template>
            <p :style="{ margin: 0 }">
              <router-link to="/class/content">
                {{ index % 2 === 0 ? "Card allow to hover" : "Card content" }}
              </router-link>
            </p>
          </a-card>
        </a-card-grid>
      </a-card>
    </div>
  </div>
</template>
<style>
#classHeader {
  height: 60px;
}

.grid-demo {
  margin-top: 20px;
  font-size: 32px;
}

.home {
}

.card-demo {
  margin: 10px 10px 10px 10px;
  border: 10px;
  text-align: center;
}
</style>
<script lang="ts"></script>
